<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>还书管理</span>
    </div>
    <!-- 表格 -->
    <div class="table_list">
      <el-table :data="tableData" style="width: 100%" :max-height="$store.state.tableHeight">
        <el-table-column prop="id" type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="username" label="借阅人" width="100"></el-table-column>
        <el-table-column prop="phone" label="联系方式" width="120"></el-table-column>
        <el-table-column prop="bookname" label="书名" width="120"></el-table-column>
        <el-table-column prop="bookshelf" label="书架" width="90"></el-table-column>
        <el-table-column prop="classify" label="分类" width="90"></el-table-column>
        <el-table-column prop="lendtime" label="借书时间" width="160">
          <!-- <template v-slot="scope">
            <span>{{ $formatDate(scope.row.lendtime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="returntime" label="还书时间" width="160">
          <!-- <template v-slot="scope">
            <span>{{ $formatDate(scope.row.returntime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="borrow_status" label="状态" width="100">
          <template v-slot="scope">
            <el-tag :type="scope.row.borrow_status === 0 ? 'danger' : ''">{{
              scope.row.borrow_status === 0 ? "未还" : "已还"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <template>
              <el-button type="primary" icon="el-icon-edit" size="mini"
                @click="uptBorrowCheckBtnFn(scope.row.id, 'borrow_status')" v-if="!scope.row.borrow_status">
                还书
              </el-button>
            </template>
            <el-popconfirm confirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red"
              title="这是一段内容确定删除吗？" @confirm="delBorrowBtnFn(scope.row.id)">
              <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini"></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <Pagination /> -->
    <Pagination :total="total" @pagination="handlePageChange" />
  </el-card>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import {
  addBorrowAPI,
  delBorrowAPI,
  getBorrowListAPI,
  getUserListAPI,
  uptBorrowAPI,
  getClassifyListAPI,
  getShelfListAPI,
  getBookListAPI,
} from "@/api";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      // 图书
      bookList: [],
      // 分页
      total: 0,
      pagenum: 1,
      pagesize: 9,
      tableData: [],
    };
  },
  methods: {
    // 还书
    uptBorrowCheckBtnFn(id, key) {
      console.log(key);
      uptBorrowAPI({ id, key }).then((res) => {
        if (res.data.status === 0) {
          this.$message.success("修改成功");
          this.getList();
        }
      });
    },
    // 分页
    handlePageChange(obj) {
      this.pagenum = obj.pagenum;
      this.pagesize = obj.pagesize;
      this.getList();
    },
    async getList() {
      const res = await getBorrowListAPI(this.pagenum, this.pagesize);
      console.log(res);
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    async delBorrowBtnFn(id) {
      const res = await delBorrowAPI(id);
      if (res.data.status === 0) {
        this.$message.success("删除借阅成功！");
      } else {
        this.$message.error("删除借阅失败！");
      }
      this.getList();
    },
    // 对话框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    onCloseFn() {
      this.$refs.borrowFromRef.resetFields();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped></style>
